<template>
	<view class="page">
		<view class="search-view">
			<input v-model="params.keyWord" placeholder="搜索" placeholder-style="font-size:24rpx" @input="handleInput" />
			<image src="../../../static/images/ic_search.png"></image>
		</view>
		<view class="tab-list">
			<u-sticky>
				<u-tabs
					lineColor="#32C59A"
					:activeStyle="{
						color: '#020202',
						fontWeight: 'bold'
					}"
					:list="tabs"
					@click="tabChange"
				></u-tabs>
			</u-sticky>
		</view>
		<view class="problem-list">
			<u-collapse accordion @open="open" ref="collapse">
				<u-collapse-item :title="item.problem" :name="index" v-for="(item, index) in questionList" :key="item.id">
					<text class="u-collapse-content">{{ item.answer }}</text>
				</u-collapse-item>
			</u-collapse>
		</view>
	</view>
</template>

<script>
import { getProblemCategory, getHelpQuestionDetail, getHelpQuestionList } from '../../../apis/request.js';
export default {
	data() {
		return {
			tabs: [],
			params: {
				categoryId: '',
				keyWord: ''
			},
			questionList: []
		};
	},
	methods: {
		tabChange(e) {
			this.params.categoryId = e.id;
			this.getQuestionList();
		},
		handleInput() {
			this.getQuestionList();
		},
		getProblemCategory() {
			getProblemCategory().then(res => {
				this.tabs = res;
				this.params.categoryId = this.tabs[0].id;
				this.getQuestionList();
			});
		},
		getQuestionList() {
			getHelpQuestionList(this.params).then(res => {
				this.questionList = res.records;
			});
		},
		open(e) {}
	},
	onLoad() {
		this.getProblemCategory();
	}
};
</script>
<style lang="scss" scoped>
.page {
	background-color: #f2f2f2ff;
	height: 100%;
	min-height: 100vh;

	.search-view {
		display: flex;
		input {
			margin: 20rpx auto;
			padding-left: 70rpx;
			box-sizing: border-box;
			width: 690rpx;
			height: 72rpx;
			border-radius: 36rpx;
			background-color: #fff;
		}
		image {
			position: absolute;
			top: 42rpx;
			left: 60rpx;
			width: 28rpx;
			height: 28rpx;
		}
	}
	.tab-list {
		background-color: #fff;
	}
	.problem-list {
		background-color: #fff;
		margin-top: 20rpx;
	}
}
</style>
